<!-- -->
<template>
  <div class="commonPicBox">
    <el-empty v-if="!list.length" description="暂无数据"></el-empty>
    <div v-if="isPic" class="commonPicItem">
      <div class="commonPicStyle" v-for="i in list" :key="i.id">
        <div style="text-align: center; cursor: pointer" @click="getDetail(i)">
          <img
            style="width: 100%; height: 230px; line-height: 230px"
            v-if="i.img"
            :src="i.img"
            alt=""
          />
          <el-image
            v-if="!i.img"
            :src="`${host}${
              i.homePage ? i.homePage : i.headPath ? i.headPath : ''
            }`"
            alt=""
            style="width: 100%; height: 230px; line-height: 230px"
          >
            <!-- <el-image :src="`${host}${i.headPath}`" alt="" style='width:100%;height:230px;line-height:230px;'> -->
            <div slot="error" class="image-slot noImage">
              {{ isDetail == "teacher" ? "暂无图片" : "暂无封面" }}
            </div>
          </el-image>
        </div>
        <div
          v-if="isDetail == 'detail'"
          style="
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            lline-height: '30px';
          "
          @click="getDetail(i)"
        >
          <!-- <el-button type="text" style="flex:5;margin-left:20px;text-align:left">{{i.courseName}}</el-button> -->
          <span
            type="text"
            style="
              flex: 5;
              margin-left: 20px;
              text-align: left;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              line-height: 35px;
            "
            >{{ i.courseName }}</span
          >
          <div>
            <el-button type="text"
              >查看详情<i class="el-icon-arrow-right"></i
            ></el-button>
            <!--  -->
          </div>
          <!-- <div style="flex:1;">
          </div> -->
        </div>
        <div
          v-if="isDetail == 'false'"
          style="cursor: pointer"
          @click="getDetail(i)"
        >
          <div
            style="
              margin-left: 10px;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            {{ i.courseName }}
          </div>
          <div style="margin-left: 10px">保存时间：{{ i.createTime }}</div>
          <!-- <div style="flex:1">
            <i class="el-icon-arrow-right"></i>
          </div> -->
        </div>
        <div
          v-if="isDetail == 'teacher'"
          @click="getDetail(i)"
          style="cursor: pointer"
        >
          <div style="display: flex; justify-content: space-between">
            <div style="margin-left: 10px">
              <div>
                <span class="colorGray">姓名：</span> {{ i.realName || "暂无" }}
              </div>
              <div>
                <span class="colorGray">职称：</span>
                {{ i.ratingTitle || "暂无" }}
              </div>
              <div>
                <span class="colorGray">毕业院校：</span>
                {{ i.school || "暂无" }}
              </div>
            </div>
            <div>
              <el-button type="text"
                >查看详情<i
                  class="el-icon-arrow-right"
                  style="
                    margin-top: 12px;
                    color: tgb(229, 2929, 229);
                    font-weight: 900;
                  "
                ></i
              ></el-button>
              <!-- <i class="el-icon-arrow-right" style="margin-top: 12px;font-size: 45px;color: #aaa;font-weight: 900;cursor:pointer" @click="getDetail(i)"></i> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="display: flex; flex-wrap: wrap; margin: 10px auto">
      <div
        class="auditClass"
        style="border-radius: 4%"
        v-for="i in list"
        :key="i.id"
      >
        <div class="auditItem" style="" v-if="toAudit">
          {{ i.fileCount }}个课件需审核
        </div>
        <div class="auditItem" v-else style="color: green; border-radius: 4%">
          已审核完毕
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            line-height: 40px;
          "
          @click="getDetail(i)"
        >
          <div
            style="
              margin-left: 10px;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            {{ i.courseName }}
          </div>
          <el-button type="text"
            >查看详情<i class="el-icon-arrow-right"></i>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    isDetail: {
      prop: String,
      default: "detail",
    },
    isPic: {
      prop: Boolean,
      default: true,
    },
    toAudit: {
      prop: Boolean,
      default: true,
    },
  },
  data() {
    return {
      host: window.location.href.split("/#/")[0] + "/api",
    };
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    getDetail(i) {
      this.$emit("clickDetail", i);
    },
  },
  created() {},
};
</script>
<style lang="less" scoped>
@color: rgb(229, 229, 299);
.auditClass {
  margin-bottom: 10px;
  border: 1px solid @color;
  padding: 4px;
  margin-right: 2%;
  width: 18%;
  .auditItem {
    text-align: center;
    height: 230px;
    line-height: 230px;
    background: #dfdfdf;
    color: red;
    font-size: 24px;
    font-weight: 700;
  }
}
.image-slot {
  color: @color;
}
</style>
<style lang="less">
@color: rgb(229, 229, 229);
.el-image__error,
.el-image__placeholder {
  background: none;
}
.commonPicBox .noImage {
  background: @color;
  border-radius: 4%;
}
.colorGray {
  color: gray;
}
.commonPicItem {
  display: flex;
  flex-wrap: wrap;
  margin: 10px auto;
}
.commonPicStyle {
  margin-bottom: 10px;
  border: 1px solid rgb(229, 229, 229);
  padding: 4px;
  margin-right: 2%;
  width: 18%;
  border-radius: 4%;
}
</style>
